<template>
	<view class="container">
		<view class="title">
			证件 <text>（上传疫苗证明，出生证明，身份证）</text>
		</view>
		<view class="">
			<!-- <uni-file-picker v-model="other_card"
			fileMediatype="image" mode="grid" @select="select" @progress="progress"
				@success="success" @fail="fail" /> -->
			<fjj-images title="图片上传" :pageImgList="other_card" @addImg="editParkImg" @deleteImg="deleteImg">
			</fjj-images>
		</view>
		<view class="save" @click="save">
			保存
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				other_card: [],
				upload_card: [],
			}
		},
		created() {
			uni.showLoading({
				title: '加载中'
			});
			uni.getStorage({
				key: 'user_info',
				success: (res) => {
					this.token = res.data.token;
					this.getData()
				},
				fail: (res) => {
					uni.redirectTo({
						url: '../../login/auth'
					});
				}
			});
		},
		methods: {
			editParkImg(currentTempFilePath) {
				//执行增加操作
				console.log(currentTempFilePath);
				uni.uploadFile({
					url: 'https://mx.acktechnologies.com.cn/api/wxapp/common/uploadImage',
					filePath: currentTempFilePath,
					name: 'file',
					formData: {
						"token": this.token
					},
					success: (res) => {
						let info = JSON.parse(res.data)
						this.other_card.push(info.data.url);
					},
					fail: (res) => {

					},
				});

			},
			deleteImg(index) {
				this.other_card.splice(index, 1); 
			},
			getData() {
				uni.request({
					url: `https://mx.acktechnologies.com.cn/api/wxapp/mine/info/othersInfoLoad`,
					data: {
						"token": this.token
					},
					method: 'GET',
					success: res => {
						if (res.data.code === 1) {
							this.other_card = res.data.data;
							uni.hideLoading();
						} else if (res.data.code === 403) {
							uni.redirectTo({
								url: '../../login/auth'
							});
						} else {
							uni.showToast({
								title: '服务器开小差了呢，请您稍后再试',
								icon: 'none'
							})
						}
					},
					fail: () => { //接口请求失败的处理
						uni.showToast({
							title: '服务器开小差了呢，请您稍后再试',
							icon: 'none'
						})
					},
				});
			},
			save() {
				let imagesArr = this.other_card.concat(this.upload_card).join(',');
				uni.request({
					header: {
						'content-type': 'application/x-www-form-urlencoded'
					},
					url: `https://mx.acktechnologies.com.cn/api/wxapp/mine/info/othersSave`,
					data: {
						"token": this.token,
						"images": imagesArr
					},
					method: 'POST',
					success: res => {
						if (res.data.code === 1) {
							uni.showToast({
								title: '保存成功',
								icon: 'none'
							});
						} else if (res.data.code === 403) {
							uni.redirectTo({
								url: '../login/auth'
							});
						} else {
							uni.showToast({
								title: '服务器开小差了呢，请您稍后再试',
								icon: 'none'
							})
						}
					},
					fail: () => { //接口请求失败的处理
						uni.showToast({
							title: '服务器开小差了呢，请您稍后再试',
							icon: 'none'
						})
					},
				});
			},
		}
	}
</script>

<style scoped lang="scss">
	.container {
		font-family: SourceHanSansCN-Normal, SourceHanSansCN;
		overflow: hidden;
		padding: 0 40rpx;
	}

	.title {
		font-size: 15px;
		font-weight: 500;
		color: #333333;
		margin-top: 20px;
		margin-bottom: 30rpx;

		text {
			font-size: 13px;
			color: #999999;
		}
	}

	.save {
		width: 700rpx;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		background: linear-gradient(90deg, #9BDFB5 0%, #84DFD1 100%);
		border-radius: 40rpx;
		margin: 60px auto 0 auto;
		font-size: 18px;
		color: #FFFFFF;
	}
</style>
